import { observer } from 'mobx-react-lite';
import Navbar from '@/components/Navbar';
import systemStore from '@/stores/SystemStore';
import { View } from '@tarojs/components';
import HouseCard from '@/components/HouseCard';
import EmptyComp from '@/components/Empty';
import userStore from '@/stores/UserStore';
import { useEffect, useState } from 'react';
import { CollectEntity } from '@/entities/CollectEntity';
import HouseCollectBusiness from '@/business/HouseCollectBusiness';
import './index.less';

function TenantCollect() {
  const {user} = userStore;
  const [collectHouseList, setCollectHouseList] = useState<CollectEntity.IHouseCollect[]>();
  const getCollectHouse = async (tenantId: number) => {
    // 获取退租的租赁信息
    const collectHouseList: any = await HouseCollectBusiness.getCollectHouseByTenantId(tenantId);
    setCollectHouseList(collectHouseList);
  };
  useEffect(() => {
    user?.id && getCollectHouse(user.id);
  }, []);
  return (
    <Navbar
      title='我的收藏'
      mode='back'
      bgColor='var(--mini-first)'
    >
      <View
        className='my-collect-container'
        style={ {height: systemStore.haveNavbarNotTabbarHeight} }
      >
        {
          collectHouseList?.length ?
            collectHouseList?.map((leaseRefund: CollectEntity.IHouseCollect, idx: number) => {
              const {
                houseName,
                landlordImg,
                landlordName,
                houseImg,
                price,
                updatedAt,
                provinceName,
                cityName,
                areaName,
                addressInfo
              } = leaseRefund;
              return (
                <HouseCard
                  key={ idx }
                  houseName={ houseName }
                  landlordImg={ landlordImg }
                  landlordName={ landlordName }
                  houseImg={ JSON.parse(houseImg)[0] }
                  housePrice={ price }
                  date={ updatedAt }
                  dateText='收藏时间：'
                  statusText='已收藏'
                  statusBg='var(--mini-first)'
                  address={ `${ provinceName }${ cityName }${ areaName }${ addressInfo }` }
                />
              );
            }) : <EmptyComp text='暂无收藏历史'/>
        }
      </View>
    </Navbar>
  );
}

export default observer(TenantCollect);